<!-- 作用域插槽有一个场景：子组件要实现一个功能，去循环显示一个列表。
但是这个子组件不一定只在这里使用，而是在很多地方使用，所以就希望这个循环
是通过外部的数据所控制的，即每一个地方的child都循环不同的内容。这就要用到
作用域插槽 -->
<!-- 既然要使用插槽，那么就要用到slot,所以写成这样<slot v-for="item in list" :item=item></slot> -->
<!-- :item=item 的意思是，item是父组件传递来的，这里只关心数据 -->
<!-- 那么这个子组件中的作用域插槽要怎么写呢 -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="root">
    <child>
      <template slot-scope="props">
        <li>{{props.item}}</li>
      </template>
    </child>
  </div>

  <script>
    Vue.component('child',{
      template:`<div>
                  <ul>
                    <slot v-for="item in list" :item=item></slot>
                  </ul>
                </div>`,
      data(){
        return {
          list:[1,2,3,4]
        }
      }
    })

    let app=new Vue({
      el:"#root",
      data:{
        props:[2,3,4,5]
      }
    })
  </script>
  
</body>
</html>